/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import styles from '../EventPosting.less';
import { Divider, Collapse, Icon, Select, Input, notification, Form, Row, Col, TreeSelect, Tag, message, Spin, Timeline, Breadcrumb } from 'antd';
import Container from "../../../components/common/Container";
import PublicService from "../../../services/PublicService";
import config from '../../../config';
import Util from '../../../utils/Util';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import MyModal from '../../../components/common/MyModal';
import JSGanttComponent from 'react-jsgantt';
import moment from 'moment';
import Edit_Appeal from './Edit_Appeal';
import Record_Edit from './Record_Edit';
import Record_Edit_Small from './Record_Edit_Small';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1315525_f8lqdqjh676.js',
});
class Record_Compare extends Component {

  constructor(props) {
    super(props);

    const vAdditionalHeaders = {

      planStartTime: { title: '计划开始时间' },
      planEndTime: { title: '计划结束时间' },
      workTime: { title: '计划工期' },

      updateDirection: { title: '修改类型' },
      proposeTask: { title: '前置任务' },

      number: { title: '序号' },
    };

    this.state = {
      flag: true,
      dataOne: [],
      dataTwo: [],
      spinning: true
    }






    this.editorOptions = {
      vCaptionType: 'Complete',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,控制右边图形结尾显示
      vQuarterColWidth: 36,
      vDateTaskDisplayFormat: ' yyyy-mm-dd', // Shown in tool tip box
      vDayMajorDateDisplayFormat: ' yyyy-mm-dd', // Set format to display dates in the "Major" header of the "Day" view
      vWeekMinorDateDisplayFormat: 'dd 日', // Set format to display dates in the "Minor" header of the "Week" view
      vLang: 0,
      vUseSingleCell: 0,
      vShowRes: 0,
      vShowCost: 0,
      vShowComp: 0,
      vShowDur: 0,
      vShowStartDate: 0,
      vShowEndDate: 0,
      vShowPlanStartDate: 0,
      vShowPlanEndDate: 0,
      vShowTaskInfoEndDate: 0,
      vShowTaskInfoLink: parseInt(this.vShowTaskInfoLink, 10), // Show link in tool tip (0/1)
      // Show/Hide the date for the last day of the week in header for daily view (1/0)
      // vTaskInfo: 0,
      vAdditionalHeaders: vAdditionalHeaders,//左边表格头部
      vEvents: {
        taskname: this.onEvent.bind(this, this.state.dataOne),//点击触发
        res: 0,
        dur: 0,
        comp: 0,
        start: 0,
        end: 0,
        planstart: 0,
        planend: 0,
        cost: 0
      },
      vEventsChange: {
        taskname: this.editValue.bind(this, this.state.dataOne),//编辑触发
        res: this.editValue.bind(this, this.state.dataOne),
        dur: this.editValue.bind(this, this.state.dataOne),
        comp: this.editValue.bind(this, this.state.dataOne),
        start: this.editValue.bind(this, this.state.dataOne),
        end: this.editValue.bind(this, this.state.dataOne),
        planstart: this.editValue.bind(this, this.state.dataOne),
        planend: this.editValue.bind(this, this.state.dataOne),
        cost: this.editValue.bind(this, this.state.dataOne)
      },
      vResources: [],
      // vEventClickRow: console.log,
      vTooltipDelay: 0,
      vDebug: false,
      vEditable: false,//是否可以编辑
      vUseSort: false,
      vFormatArr: [],//切换控制日期选择,日,周,月
    };

    this.editorOptions2 = {
      vCaptionType: 'Complete',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,控制右边图形结尾显示
      vQuarterColWidth: 36,
      vDateTaskDisplayFormat: ' yyyy-mm-dd', // Shown in tool tip box
      vDayMajorDateDisplayFormat: ' yyyy-mm-dd', // Set format to display dates in the "Major" header of the "Day" view
      vWeekMinorDateDisplayFormat: 'dd 日', // Set format to display dates in the "Minor" header of the "Week" view
      vLang: 0,
      vUseSingleCell: 0,
      vShowRes: 0,
      vShowCost: 0,
      vShowComp: 0,
      vShowDur: 0,
      vShowStartDate: 0,
      vShowEndDate: 0,
      vShowPlanStartDate: 0,
      vShowPlanEndDate: 0,
      vShowTaskInfoEndDate: 0,
      vShowTaskInfoLink: parseInt(this.vShowTaskInfoLink, 10), // Show link in tool tip (0/1)
      // Show/Hide the date for the last day of the week in header for daily view (1/0)
      // vTaskInfo: 0,
      vAdditionalHeaders: vAdditionalHeaders,//左边表格头部
      vEvents: {
        taskname: this.onEvent.bind(this, this.state.dataTwo),//点击触发
        res: 0,
        dur: 0,
        comp: 0,
        start: 0,
        end: 0,
        planstart: 0,
        planend: 0,
        cost: 0
      },
      vEventsChange: {
        taskname: this.editValue.bind(this, this.state.dataTwo),//编辑触发
        res: this.editValue.bind(this, this.state.dataTwo),
        dur: this.editValue.bind(this, this.state.dataTwo),
        comp: this.editValue.bind(this, this.state.dataTwo),
        start: this.editValue.bind(this, this.state.dataTwo),
        end: this.editValue.bind(this, this.state.dataTwo),
        planstart: this.editValue.bind(this, this.state.dataTwo),
        planend: this.editValue.bind(this, this.state.dataTwo),
        cost: this.editValue.bind(this, this.state.dataTwo)
      },
      vResources: [],
      // vEventClickRow: console.log,
      vTooltipDelay: 0,
      vDebug: false,
      vEditable: false,//是否可以编辑
      vUseSort: false,
      vFormatArr: [],//切换控制日期选择,日,周,月
    };
  }




  state = {
    flag: true
  }


  componentDidMount() {
    this.comparedWithLastTime()

  }
  //上一次
  comparedWithLastTime = () => {
    this.setState({
      spinning: true
    })
    let params = {
      changeId: this.props.changeId,
      projectId: this.props.id
    }
    request({
      url: '/pm-web/projectmanage/progress/comparedWithLastTime',
      method: 'POST',
      data: params
    }).then(data => {
      if (data.rc === 0) {
        this.setState({
          dataOne: data.ret.ganttList2,
          dataTwo: data.ret.ganttList1,
          flag: true,
          spinning: false
        })
      }
    })
  }

  onEvent = (list, task, event, cell, column) => {

    if (task.getParent() == 0) {
      return
    }

    if (Number(task.getParItem().getOriginalID() < 5)) {
      //大事件
      request({
        url: '/pm-web/process/task/getEventInfoCopy',
        method: 'POST',
        data: { id: task.getCaption() }
      }).then(data => {
        // console.log(data)
        if (data.rc === 0) {
          this.setState({
            EditData: data.ret.eic,
            MyModal1Visible: true,
            id: task.getCaption()
          })


        }
      })
    } else {
      //小事件
      request({
        url: '/pm-web/process/task/getSubeventsInfoCopy',
        method: 'POST',
        data: { id: task.getCaption() }
      }).then(data => {

        if (data.rc === 0) {
          this.setState({
            EditDataSmall: data.ret.sic,
            MyModal1VisibleSmall: true,
            id: task.getCaption(),
            MyModal1VisibleSmall: true,

          })


        }
      })
    }




  }

  editValue(list, task, event, cell, column) {
    // tslint:disable-next-line:triple-equals
    const found = list.find(item => item.pID == task.getOriginalID());
    if (!found) {
      return;
    } else {
      found[column] = event ? event.target.value : '';
    }
    // console.log(found);
  }

  change() {
    // console.log('change:', this.editor);
    // console.log('change2:', this.editorTwo);
  }

  setLanguage(lang) {
    this.editorOptions.vLang = lang;
    this.editor.setOptions(this.editorOptions);
  }

  setLanguage(lang) {
    this.editorOptions2.vLang = lang;
    this.editor.setOptions(this.editorOptions2);
  }

  customLanguage() {
    // this.editorOptions.languages = {
    //   'pt-BR': {
    //     'auto': 'Automático testing'
    //   },
    //   'en': {
    //     'auto': 'Auto testing'
    //   }
    // };
    this.editor.setOptions(this.editorOptions);
    this.editor.setOptions(this.editorOptions2);
  }

  changeObject() {
    this.state.data.randomNumber = Math.random() * 100;
  }

  changeData() {
    this.state.data = Object.assign({}, this.state.data,
      { randomNumber: Math.random() * 100 });
  }


  onCheck = (a) => {

  }

  onOne = () => {
    this.comparedWithLastTime()
  }

  onTwo = () => {
    this.setState({
      spinning: true
    })
    let params = {
      changeId: this.props.changeId,
      projectId: this.props.id
    }
    request({
      url: '/pm-web/projectmanage/progress/comparedWithTheOriginal',
      method: 'POST',
      data: params
    }).then(data => {
      if (data.rc === 0) {
        this.setState({
          dataOne: data.ret.ganttList2,
          dataTwo: data.ret.ganttList1,
          flag: false,
          spinning: false
        })
      }
    })
  }

  onBack = () => {
    this.props.onBack()
  }

  // 取消保存
  ModalCancel = (type) => {
    let t = this;
    t.setState({
      [type]: false,
      modalBtnLoading: false
    })
  };



  render() {
    let t = this
    let width = document.body.clientWidth;
    const height = document.body.clientHeight;
    let containerHeight = '76vh';
    let tableHeight = 310;
    if (width > 1367) {
      tableHeight = 380;
      containerHeight = '83vh';
    }


    return (
      <Spin tip="Loading..." spinning={this.state.spinning}>
        <div style={{ margin: 10, marginBottom: 0, marginTop: 0, height: '86vh', backgroundColor: '#F6FCFC', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3 }} className={styles.Record_Compare}>
          {/* 大事件编辑页面 */}
          {
            this.state.MyModal1Visible && <Record_Edit
              ModalCancel={this.ModalCancel.bind(this, 'MyModal1Visible')}
              EditData={this.state.EditData}
              onModalSave={this.onModalSave}
            />
          }
          {/* 小事件编辑页面 */}
          {
            this.state.MyModal1VisibleSmall && <Record_Edit_Small
              ModalCancel={this.ModalCancel.bind(this, 'MyModal1VisibleSmall')}
              EditData={this.state.EditDataSmall}
              onModalSave={this.onModalSaveSmall}
            />
          }
          {/* <div style={{ height: '30px', backgroundColor: '#D6EDEB', display: 'flex', alignItems: 'center', flexDirection: 'row', borderRadius: 3, border: '2px solid #fff', paddingLeft: 15 }}>变更记录</div> */}
          <div style={{ height: '30px', display: 'flex', alignItems: 'center', flexDirection: 'row', borderRadius: 3, border: '2px solid #fff', paddingLeft: 15,boxShadow:'0px 0px 6px 0px rgba(226,226,226,1)',borderRadius:'3px',justifyContent:'space-between'}}>
            <Breadcrumb>
              <Breadcrumb.Item >
                <IconFont type="icon-moban" style={{ color: '#28a4b9' }} />
                <span>项目变更记录</span>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <IconFont type="icon-zhuluxiangmubiangeng" style={{ color: 'rgb(109, 103, 229)' }} />
                <span>记录详情</span>
              </Breadcrumb.Item>
            </Breadcrumb>
            <Tag color={'#f5222d'} onClick={this.onBack} style={{ float: 'right' }}>关闭</Tag>
          </div>
          <div style={{ padding: 10,paddingBottom:0 }}>
            <Tag color={this.state.flag ? '#fa8c16' : 'orange'} onClick={this.onOne} style={{ margin: 3 }}>与上一次对比</Tag>
            <Tag color={this.state.flag ? 'green' : '#87d068'} onClick={this.onTwo} style={{ margin: 3 }}>与初始对比</Tag>

          </div>
          <div className={styles.warpBox} style={{ height: '76vh', backgroundColor: '#F6FCFC', overflow: 'auto', display: 'flex', padding: 10 }}>

            <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex',boxShadow:'0px 0px 6px 0px rgba(226,226,226,1)',borderRadius:'3px',flexDirection:'column' }}>
            <div style={{ fontSize: 18, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3,color:'#fff', backgroundColor:this.state.flag? '#fa8c16' : '#87d068'}}>{this.state.flag?'上一次项目':'项目初始'}</div>
              <JSGanttComponent data={this.state.dataOne} options={this.editorOptions} />

            </div>
            <div style={{ width: 20, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex', }}>
            </div>
            <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex',boxShadow:'0px 0px 6px 0px rgba(226,226,226,1)',borderRadius:'3px',flexDirection:'column' }}>
            <div style={{ fontSize: 18, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3, backgroundColor: '#fff' }}>当前项目</div>
              <JSGanttComponent data={this.state.dataTwo} options={this.editorOptions2} />

            </div>
          </div>

        </div>
      </Spin>
    );


  }

}
export default Record_Compare;

